<template>
  <NavBar></NavBar>
  <div class="HandleFriend-container">
    <div class="HandleFriend-box">
      <div class="search-title">好友列表</div>

      <el-button type="primary" @click.prevent="Refreshing(true)">
        刷新好友列表
      </el-button>
      <!-- 使用 Element Plus 的表格组件 -->
      <el-table
        :data="friendRequests"
        style="width: 100%; height: 60vh; font-size: 20px"
      >
        <el-table-column prop="avatarUrl" label="头像" min-width="240">
          <template #default="{ row }">
            <img :src="row.avatarUrl" alt="" class="user-avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" min-width="240" />
        <el-table-column prop="email" label="邮箱" min-width="240" />
        <el-table-column label="游玩天数" min-width="240">
          <template #default="{ row }"> {{ row.gameDays }}天 </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="{ row }">
            <el-popconfirm
              @confirm="clearFriend(row.userId)"
              title="你确定要删除好友?"
            >
              <template #reference>
                <el-button type="danger" round> 删除好友 </el-button>
              </template>
            </el-popconfirm>
            <el-button type="success" @click="privateChat(row.userId)" round>
              私聊
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import $ from "jquery"; // 引入 jQuery
import { Search } from "@element-plus/icons-vue";
import NavBar from "@/components/NavBar.vue";

export default {
  components: { NavBar },
  setup() {
    const store = useStore();

    const friendRequests = ref([]);
    const form = reactive({
      searchParam: "",
    });

    const getFriendList = (send) => {
      store.dispatch("getFriends", {
        success(resp) {
          friendRequests.value = store.state.user.friends;
          if (send) ElMessage.success(resp);
        },
        error(resp) {
          ElMessage.error(resp);
        },
      });
    };

    const clearFriend = (friendId) => {
      $.ajax({
        url: "http://localhost:7090/api/friend/remove",
        type: "POST",
        contentType: "application/json",
        headers: {
          Authorization: `Bearer ${store.state.user.token}`,
        },
        data: JSON.stringify({
          userid: store.state.user.userId,
          friendId: friendId,
        }),
        success(resp) {
          if (resp.status === "success") {
            ElMessage.success(resp);
            Refreshing(false); //不弹出刷新成功提示的刷新
          } else {
            ElMessage.error(resp);
            Refreshing(false);
          }
        },
        error() {
          ElMessage.error("网络错误，请重试");
        },
      });
    };
    const privateChat = (friendId) => {
      ElMessage.warning(friendId + "私聊功能还未实现");
      // console.log(friendId);
    };
    const dateFormatted = (dateStr) => {
      const date = new Date(dateStr);
      const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
        .getHours()
        .toString()
        .padStart(2, "0")}:${date
        .getMinutes()
        .toString()
        .padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
      return formattedDate;
    };
    const Refreshing = (show) => {
      getFriendList(show);
    };
    onMounted(() => {
      Refreshing(false);
    });

    return {
      form,
      friendRequests,
      getFriendList,
      Search,
      Refreshing,
      clearFriend,
      privateChat,
      dateFormatted,
    };
  },
};
</script>

<style scoped>
.user-avatar {
  width: 30%;
}

.HandleFriend-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /*background-color: #f7f7f7;*/
}

.HandleFriend-box {
  height: 80vh;
  width: 75%;
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(5, 5, 5, 0.11);
}

.search-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.el-input.input-with-select {
  margin-left: auto;
  margin-right: auto;
}
</style>
